<template>
  <div style="height: 100vh">
    <el-container >
        <el-header>
          <Header></Header>
        </el-header>
      <el-header>
        <!-- 导航栏 -->
        <!--
        <div class="main-navigation">
          <div class="main-nav">
            <div class="row">
              <div class="collapse navbar-collapse" id="main-menu">
                <ul class="menu nav navbar-center">
                  <li><a href="index">首页</a></li>
                </ul> </div> </div> </div></div>
          -->
        </el-header>
      <el-container  v-show="show==1" >
      <el-side style="min-width:60%;">
        <div class="content">
          <div class="TopPic"></div>
          <div class="contentWrap">
            <div class="colum_1">
              <h1>自考实践考核报名系统</h1>
              <p class="introTxt">本系统用于华南师范大学计算机类自考专业学生的报名、管理和结果查询等。
                <br /><br />
                第一次使用本系统进行报名时，请先注册。<span style="color:#da4837;font-weight:bold">同一身份证号每年只允许注册一次</span>
                ，注册成功后，可用于报考相关的<br/>类别。注册时的用户名和密码将是考生在本系统申请和查询结果等信息的唯一依据。</p>
              <br><br><br><br><br><br>
              <div class="regSection">
              还不是本系统的用户？
              <el-button type="danger" @click="goRegister">
                注册新用户
              </el-button>
              </div>
            </div> </div>

        </div>
      </el-side>
      <el-main>

      <!--
      prop：表单域 model 字段，在使用 validate、resetFields 方法的情况下，该属性是必填的
      -->
        <!-- direction="vertical"-->
        <div class="table">
          <div class="sontable">
            <h2 style="margin-top: 10px">考生登录</h2>
            <span class="STYLE2" style="font-size:14px;color:#CC0000;" >&nbsp;{{error_msg}}</span>

            <el-form :model="param" :rules="rules" ref="login" label-width="80px">
              <el-form-item label="用户名" prop="username">
                <el-input type="text" placeholder="请输入准考证号" size="small"
                          prefix-icon="el-icon-user"
                          v-model="param.username"></el-input>
              </el-form-item>
              <el-form-item label="密码" prop="password">
                <el-input type="password" placeholder="请输入密码" size="small" show-password prefix-icon="el-icon-lock"
                          v-model="param.password"></el-input>
              </el-form-item>


              <el-form-item label="验证码" prop="yzm">
                <el-col :span="12" >
              <el-input type="text" placeholder="验证码" prefix-icon="el-icon-picture" style="width: 100px"
                        v-model="param.yzm"></el-input>
                </el-col>
                <el-col :span="12">
                  <Canvas></Canvas>
                </el-col>
              </el-form-item>


              <div style="margin-left: 26px">
              <el-col :span="12" >
                <el-button type="primary" @click="SubmitForm">登录</el-button>
              </el-col>
              <el-col :span="12">
                <el-button type="primary" @click="goForget">忘记用户名/密码</el-button>
                <!--
                <el-space wrap size="9px">
                </el-space>
                -->
              </el-col>
              </div>
              </el-form>
          </div>
        </div>
      </el-main>
        </el-container>
      <el-container  v-show="show==0" >
          <div class="content">
            <div class="TopPic"></div>
            <div class="contentWrap">
              <div class="colum_1" style="margin-left: 15%">
                <h1>自考实践考核报名系统</h1>
                <p class="introTxt">
                </p>
                <el-result
                    icon="warning"
                    title="系统暂未开放"
                    sub-title="当前时间未开放报名系统"
                ></el-result>

              </div> </div>
          </div>
      </el-container>

      <el-foot>
        <div style="text-align: center">
        <el-link type="default" style="text-align: center" @click="goAdminLogin">管理员登录</el-link>
        </div>
        <Footer></Footer>
      </el-foot>
    </el-container>
  </div>
</template>


<script>
//布局链接：https://blog.csdn.net/weixin_39237340/article/details/121666311
//参考链接：https://blog.csdn.net/qq_33820545/article/details/108529789
//https://blog.csdn.net/weixin_39237340/category_11504745.html
import Footer from "@/components/Footer";
import Header from "@/components/Header";
import Canvas from "@/components/Canvas";
import ElementUI from "element-ui";

export default {
  name: "login",
  components: {Canvas, Header, Footer},
  data(){
    return {
      show:"0",
      param:{
        username:"",
        password:"",
        yzm:"",
        error_msg:""
      },
      //定义校验规则
      rules:{
        username:[
          {required:true,message:"请输入准考证号",trigger:"blur"}
        ],
        password:[
          {required:true,message:"请输入密码",trigger:"blur"}
        ],
        yzm:[
          {required:true,message:"请输入验证码",trigger:"blur"}
        ],
      }
    }

  },
  mounted:function(){
    this.JudgeTime();//需要触发的函数
  },
  methods:{
    JudgeTime(){
      this.axios.post("opentime"
      ).then((response) => {
        console.log(response.data)
        console.log(response.data['msg'])
        this.$forceUpdate()         //解决数据渲染延迟
        if( response.data['msg'] == "ok"){        //是开放时间
          this.show = "1"
        }else{          //不是开放时间
          this.show = "0"
        }
      })
    },
    SubmitForm(){
      //this.error_msg = "登录成功"
      this.$forceUpdate();
      if(this.param.username == ""  ){
        this.error_msg = "用户名不能为空"
        return
      }else if( this.param.password == "" ){
        this.error_msg = "密码不能为空"
        return
      }else if( this.param.yzm == "" ){
        this.error_msg = "验证码不能为空"
        return
      }


      //解决axios提交到后端为null的情况
      let params = new URLSearchParams();
      params.append('username', this.param.username);
      params.append('password', this.param.password);
      params.append('yzm', this.param.yzm);


      this.axios({
        method: 'post',
        url:"login",
        withCredentials:true,
        data:params,
        dataType:'JSONP',  // 处理Ajax跨域问题,
      }).then((response) => {
        console.log(response.data)
        /*
        email，msg，name，ticket，username
        * */
        console.log(response.data['msg'])
        if( response.data['msg'] == "ok"){        //账户密码正确
          //没用到，向下个页面传递参数:https://www.cnblogs.com/hthuang/p/7646472.html
          // 设置全局user
          this.$store.commit('login', response.data)
          ElementUI.Message({
            message: '登录成功',
            type: 'success'
          });
          this.$router.push(
              {
                path:"/success",
              }
          );        //跳转到成功页面
        }else{      //登录失败
          this.$forceUpdate()         //解决数据渲染延迟
          this.error_msg = response.data['error']
          this.Canvas.methods.createCode();         //换验证码
          //this.$forceUpdate()
        }

      })
    },
    ///返回首页
    goHome(){
      this.$router.push("/index");
    },
    //跳转注册界面
    goRegister(){
      this.$router.push("/register");
    },
    //跳转注册界面
    goAdminLogin(){
      this.$router.push("/adminlogin");
    },
    //跳转忘记密码器页面
    goForget(){
      this.$router.push("/forget");
    },
  }
}

</script>

<style lang="less" scoped>
//按钮关系
.relabtn{
  margin-left: 20px;
}
//表单那块——登陆
.table{
  background-color: #eaedf1;
  margin-top:20px;
  margin-left: 20px;
  width: 400px;
  height: 350px;
  font-size:14px;
  color:#424242;
  line-height:34px;
}
.sontable{
  margin-top:20px;
  margin-left: 20px;
}
.regSection
{
  display:inline-block;
  padding:0 15px;
  line-height:30px;
  font-weight:bold;
}
.headerWrap {
  height: 65px;
  margin: auto;
  padding-top: 30px;
  width: 980px;
}
.content {
  margin: auto;
  width: 980px;
}
.contentWrap
{
  padding-top:25px;
}

.colum_1 {
  margin-left: 10vh;
  float: left;
  _display: inline;
  width: 634px;
}

.colum_2 {

  float: left;
  _display: inline;
  width: 326px;
  margin-left: 20px;

}
.introTxt {
  border-bottom: 1px solid #DDDDDD;
  color: #666;
  padding: 20px 0;
  margin:0 20px;
  line-height:20px;
}
.blue-bg{
  width: 100%;
  height: 130px;
  background: #017FCA;
  position: absolute;
  top: 0;
  left: 11px;
  z-index: 0}/*layout-bg*/

.main-navigation ul li a:hover{background: #4AB8FF !important;}
.main-navigation ul li a:active{background: #4AB8FF !important;}

/* main-navigation*/
.main-navigation{width: 100%;height: 50px;text-align: center;background: #1B4568;}
.main-navigation .main-nav{width: 1170px;margin: 0px auto;}
.main-navigation .menu li{height: 50px;font-size: 16px;text-align: center;width: 150px;list-style: none;display: inline-block;position: relative;}
.main-navigation .menu li.nav-current{background: #4AB8FF;}
.main-navigation .menu li:hover{background: #4AB8FF;}
.main-navigation .menu li:active{background: #4AB8FF;}
.main-navigation .menu li a{color: #ffffff;line-height: 3em;display: block;padding: 0px;}
.main-navigation .menu li a:visited{background: #4AB8FF;}
.main-navigation .menu li:hover>a{text-decoration: none;}
.main-navigation .menu li ul{visibility: hidden;background: #4AB8FF;padding: 7px 0px;margin: 0;position: absolute;text-align: left;padding-left: 20px;padding-right: 0px;top: 120%;width: 160px;z-index: 999;border-top: none;}
.main-navigation .menu li ul li{width: 200px;text-align: left;display: block;margin: 0;}
.main-navigation .menu li ul li a{/* line-height: 2.5em;*/color: #505050;}
.main-navigation .menu li ul:hover>a{color: #e67e22;}
.main-navigation .menu li:hover ul{visibility: visible;opacity: 1;/* filter: alpha(opacity=100);*/top: 100%;}
.main-navigation .row { margin: 0; }

.el-form{
  width: 250px;

}
.el-input{
  width:240px;
}

.el-container{
  /*设置内部填充为0，几个布局元素之间没有间距*/
  padding: 0px;
  /*外部间距也是如此设置*/
  margin: 0px;
  height:100%;
  width:100%;

}
/*
.el-header {
  display: flex;
  justify-content: space-between;
  padding-left: 0;
  background-color: #017FCA;
  align-items: center;
  color: #fff;
  //font-size: 20px;
  //标题的字体及大小
  font-size:40px;
  font-family: 华文行楷;
  height: 130px;
  > div {
    display: flex;
    align-items: center;
    img {
      width: 110px;
      height: 110px;
      border-radius: 50%;
    }
    span {
      margin-left: 15px;
    }
  }
}*/
.el-aside {
  background-color: #333744;
  .el-menu {
    border-right: none;
  }
}
.el-main {

}
</style>